<!--  -->
<template>
  <div class>
    <div class="serviceW">
      <section class="serviceTop">
        <h1>用户详情</h1>
        <div class="blank">
          <router-link to="/User">
            <img src="../assets/back1.png" alt />
            <span>返回</span>
          </router-link>
        </div>
      </section>
      <section class="serviceBox">
        <div class="serviceCont">
          <p class="serTit">
            <img src="../assets/titline1.png" alt />
            <span>基础信息：</span>
          </p>
          <div>
            <div class="ser-left">
              <img src="../assets/u4865.png" alt />
            </div>
            <div style="width:500px; margin-left:100px" class="ser-cen">
              <p class="serTit2">
                <span style="float:left">用户ID：0012639</span>
                <span style="float:right">微信昵称：爱吃阿司匹林的喵</span>
              </p>
              <p class="serTit2">
                <span style="float:left">会员手机：18854138769</span>
                <span style="float:right">注册时间：2019-01-25 10:55</span>
              </p>
              <p class="serTit2">
                <span style="float:left">上次购买时间：2019-01-25 10:55</span>
                <span style="float:right">会员等级：4</span>
              </p>
            </div>
          </div>
          <!-- 统计信息 -->
          <div class="serTit" style=" height: 150px;">
            <p style=" height: 40px;">
              <img src="../assets/titline1.png" alt />
              <span>统计信息：</span>
            </p>
            <userdetalist></userdetalist>
          </div>
          <!--  -->
          <!-- 课程购买记录 -->
          <div class="serTit" style=" height: 200px;">
            <p style=" height: 40px;">
              <img src="../assets/titline1.png" alt />
              <span>课程购买记录：</span>
            </p>
            <userdetalist1></userdetalist1>
          </div>
          <!--  -->
          <!-- 活动参加记录 -->
          <div class="serTit">
            <p style=" height: 40px;">
              <img src="../assets/titline1.png" alt />
              <span>活动参加记录：</span>
            </p>
            <userdetalist2></userdetalist2>
          </div>
          <!--  -->
        </div>
      </section>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import userdetalist from "../components/UserDetaList";
import userdetalist1 from "../components/UserDetaList1";
import userdetalist2 from "../components/UserDetaList2";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
    userdetalist,
    userdetalist1,
    userdetalist2,
  },
  data() {
    //这里存放数据
    return {};
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {
    close1: function () {},
  },
  //方法集合
  methods: {
    submitBtn: function () {
      this.serShow = true;
    },
    close1: function () {
      console.log(1);
      this.serShow = false;
    },
    open: function () {
      this.$message({
        message: "保存成功！",
        type: "success",
      });
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style  scoped>
a {
  text-decoration: none;
  color: #9137f3;
}
input,
button {
  outline: none;
}
ul,
li,
ol {
  list-style: none;
}
i,
em {
  font-style: normal;
}
.serviceW {
  width: 1100px;
  margin: 0 auto;
  color: #333;
  font-size: 14px;
}
h1 {
  height: 70px;
  line-height: 70px;
  font-family: "思源黑体 Bold", "思源黑体 Regular", "思源黑体";
  font-weight: 700;
  font-style: normal;
  font-size: 24px;
  color: #9137f3;
}
.serviceBox {
  border: 1px solid #e4e4e4;
  padding: 30px 30px;
  height: 800px;
}
.serviceTop {
  display: flex;
  justify-content: space-between;
}
.blank {
  width: 78px;
  height: 32px;
  border: 1px solid #9137f3;
  border-radius: 0.2em;
  line-height: 32px;
  margin-top: 20px;
}
.blank img {
  padding: 0 10px;
}
.serTit {
  font-weight: bold;
  height: 20px;
  line-height: 20px;
  font-size: 16px;
}
.serTit img,
.serTit span {
  display: block;
  float: left;
  margin-right: 10px;
}
.serTit img {
  margin-top: 2px;
}
.ser-left {
  float: left;
  margin-left: 20px;
  margin-top: 25px;
}
.serTit2 {
  color: #999;
  font-weight: bold;
  height: 20px;
  margin-bottom: 20px;
  line-height: 20px;
}
#user-input {
  position: relative;
  top: 10px;
  left: 10px;
  width: 255px;
  height: 25px;
  font-family: "思源黑体";
  font-weight: 400;
  font-style: normal;
  font-size: 13px;
  text-decoration: none;
  color: #000000;
  text-align: left;
  border-color: transparent;
  outline-style: none;
}
</style>